<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/admin' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item to="/admin/meta/page">元数据模板列表</el-breadcrumb-item>
            <el-breadcrumb-item>元数据模板详情</el-breadcrumb-item>
        </el-breadcrumb>
        <el-tabs value="base" type="card" @tab-click="handleClick" class="mt15">
            <el-tab-pane label="基本信息" name="base" class="form-static">
                <el-row type="flex">
                    <el-col :span="3" align="right">名称：</el-col>
                    <el-col :span="9">{{baseInfo.name}}</el-col>
                    <el-col :span="3" align="right">编号：</el-col>
                    <el-col :span="9">{{baseInfo.code}}</el-col>
                </el-row>
                <el-row type="flex">
                    <el-col :span="3" align="right">值：</el-col>
                    <el-col :span="9">
                        <pre v-text="baseInfo.val"></pre>
                    </el-col>
                    <el-col :span="3" align="right">类型：</el-col>
                    <el-col :span="9">{{baseInfo.type}}</el-col>
                </el-row>
                <el-row type="flex">
                    <el-col :span="3" align="right">符号：</el-col>
                    <el-col :span="9">{{baseInfo.criteria}}</el-col>
                    <el-col :span="3" align="right">修改次数：</el-col>
                    <el-col :span="9">{{baseInfo.ve}}</el-col>
                </el-row>
                <el-row type="flex">
                    <el-col :span="3" align="right">创建人：</el-col>
                    <el-col :span="9">{{baseInfo.cu}}</el-col>
                    <el-col :span="3" align="right">创建时间：</el-col>
                    <el-col :span="9">{{baseInfo.cd}}</el-col>
                </el-row>
                <el-row type="flex">
                    <el-col :span="3" align="right">修改人：</el-col>
                    <el-col :span="9">{{baseInfo.lmu}}</el-col>
                    <el-col :span="3" align="right">修改时间：</el-col>
                    <el-col :span="9">{{baseInfo.lmd}}</el-col>
                </el-row>
            </el-tab-pane>
            <el-tab-pane label="标签信息" name="meta">
                <el-table :data="metas" stripe style="width: 100%">
                    <el-table-column prop="def.name" label="名称"></el-table-column>
                    <el-table-column prop="code" label="编号"></el-table-column>
                    <el-table-column prop="type" label="类型"></el-table-column>
                    <el-table-column prop="val.value" label="值"></el-table-column>
                </el-table>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script>
    import axios from '~plugins/axios';

    export default {
        layout: 'admin',
        head() {
            return {title: '用户详情'};
        },
        data() {
            return {
                metas: []
            };
        },
        asyncData({query}) {
            return axios.get(`/api/metaTemplate/${query.id}`).then(res => {
                return {baseInfo: res.data};
            });
        },
        methods: {
            handleClick(tab) {
                tab === 'base' ? this.queryBase() : this.queryMeta();
            },
            queryBase() {
                axios.get(`/api/metaTemplate/${this.baseInfo.id}`).then(res => {
                    this.baseInfo = res.data;
                });
            },
            queryMeta() {
                axios.get(`/api/metaParam/findByObjId/${this.baseInfo.id}`).then(res => {
                    this.metas = res.data;
                });
            }
        }
    };
</script>